<template>
  <div class="container ml-5 px-2 py-1">
    <Slider
      class="my-5"
      :min="0"
      :max="allNum"
      :value="process"
      :view-num="viewNum"
      :is-drag="true"
    />
    <el-row>
      <el-col :span="12">
        <div class="play-tool">
          <el-button style="margin-left: 0;" @click="play">
            <x-icon icon="CaretRight" source="el" size="24" />
          </el-button>
          <el-button @click="stop">
            <x-icon icon="stop" size="24" source="cus" />
          </el-button>
          <el-button @click="play">
            <x-icon icon="pause" size="24" source="cus" />
          </el-button>
          <el-button @click="fastback">
            <x-icon icon="fastback" size="24" source="cus" />
          </el-button>
          <el-button @click="back">
            <x-icon icon="back" size="24" source="cus" />
          </el-button>
          <el-button @click="forward">
            <x-icon icon="forward" size="24" source="cus" />
          </el-button>
          <el-button @click="refresh">
            <x-icon icon="Refresh" size="24" source="el" />
          </el-button>
          <!-- <el-checkbox v-model="isLoop" class="ml-4" label="循环播放" /> -->
          <el-tooltip :content="playFileName" placement="top">
            <span class="current-paly"> 播放中 {{ playFileName }} </span>
          </el-tooltip>
        </div>
        <div class="upload-file-bar">
          <el-button style="width: 200px;" @click="dialogVisible = true">打开文件</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <el-form class="play-control">
          <el-form-item label="步进大小(采样点)">
            <el-input v-model="settings.step" />
          </el-form-item>
          <el-form-item label="回放速度(ms)">
            <el-input v-model="settings.playbackRate" />
          </el-form-item>
          <el-form-item label="自动循环">
            <el-checkbox v-model="settings.autoLoop" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Playbar">
  import Slider from '@/components/Slider'

  const props = defineProps({
    reloadCharts: {
      type: Function,
      default: null
    }
  })
  const playFileName = ref('IQ-cf500000000-sample200000-bw150000-count8192-1687673137726.bin')
  const viewNum = ref(2000)
  const allNum = ref(500000)
  const process = ref(0)
  const time = ref(500)
  const interval = ref(null)
  const settings = reactive({
    step: 2000,
    playbackRate: 50000,
    autoLoop: true
  })
  const play = () => {
    interval.value = setInterval(() => {
      process.value += viewNum.value
    }, time.value)
  }

  const pause = () => {
    clearInterval(interval.value)
    interval.value = null
  }

  const stop = () => {
    pause()
    process.value = 0
  }

  const fastback = () => {
    process.value = 0
  }

  const back = () => {
    process.value -= viewNum.value
  }

  const forward = () => {
    process.value += viewNum.value
  }
</script>

<style scoped lang="scss">
  .container {
    background-color: #222;
    color: var(--scan-play-color);
    font-weight: 100;
    height: 260px;
    padding: 20px 10px;
    .container-header {
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .play-tool {
      margin: 2px;
      .el-button {
        padding: 4px 0;
        margin: 0;
        border-radius: 0;
        border: var(--play-bar-slider-border);
        background-color: var(--play-bar-slider);
        margin: 2px;
        width: auto;
        height: auto;
        :hover {
          background-color: #7c4918;
        }
        .x-icon {
          color: var(--scan-text-color);
        }
      }
    }
    .upload-file-bar {
      margin-top: 30px;
      .el-button {
        background-color: var(--btn-bg);
        border-color: var(--play-bar-active);
        color: var(--table-scrollbar-color);
      }
    }
    .play-control {
      .el-input {
        --el-input-focus-border-color: var(--play-bar-active);
        --el-input-border-color: var(--play-bar-active);
        --el-select-input-focus-border-color: var(--play-bar-active);
        --el-input-hover-border-color: var(--play-bar-active);
        --el-text-color-regular: var(--scan-text-color);
        :deep(.el-input__wrapper) {
          background-color: var(--input-bg);
        }
      }
      .el-checkbox {
        --main-color: var(--input-bg);
      }
    }
  }
</style>
